<template>
  <!--辅计量单位-->
  <div v-if="editDialogVisiblePill">
    <div style="width: 60%; left: 50%">
      <el-form :model="dataForm" label-width="150px" :rules="dataFormRules" ref="dataForm" :size="size">
        <el-form-item label="生产企业" prop="name1">
          <el-input v-model="dataForm.name1" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="药品说明" prop="name2">
          <el-input v-model="dataForm.name2" type="textarea" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="批准文号" prop="name3">
          <el-input v-model="dataForm.name3" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="质量标准" prop="name4">
          <el-input v-model="dataForm.name4" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="企业GMP证书号" prop="name5">
          <el-input v-model="dataForm.name5" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="认证时间" prop="name6">
          <el-date-picker v-model="dataForm.name6" type="date" placeholder="选择认证日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="有效期" prop="name7">
          <el-date-picker
            v-model="dataForm.name7" type="date" placeholder="选择有效日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="存储条件" prop="name8">
          <el-input v-model="dataForm.name8" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="药品图片" prop="name9">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="药品LOGO" prop="name10">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align:center; margin-top: 10px">
      <el-button :size="size" @click="submitForm" type="primary">提交</el-button>
    </div>

  </div>
</template>

<script>
  import KtButton from '@/views/Core/KtButton'

  export default {
    components: {
      KtButton,
    },
    data() {
      return {
        size: 'small',
        imageUrl: "https://gd1.alicdn.com/imgextra/i1/2613993665/O1CN016x9dQ81cwcAbPD75A_!!2613993665.jpg",
        editDialogVisiblePill: false,
        dataForm: {
          name1: '广州白云山和记黄埔中药有限公司',
          name2: '白云山板蓝根颗粒为棕色或棕褐色的颗粒；味甜，微苦． 2 板蓝根．辅料：蔗糖，糊精． 3 . 1094 ．清热解毒，凉血利咽。用于肺胃热盛所致的咽喉肿痛、口咽干燥；急性扁桃体炎 5 尚不明确',
          name3: '国药准字 244023485',
          name4: '合格',
          name5: '2349966',
          name6: '2020-04-22',
          name7: '2020-04-22',
          name8: '阴凉、干燥'
        },
        dataFormRules: {
          name1: [{required: true, message: '请输入生产企业', trigger: 'blur'}],
          name2: [{required: true, message: '请输入药品说明', trigger: 'blur'}],
          name3: [{required: true, message: '请输入批准文号', trigger: 'blur'}],
          name4: [{required: true, message: '请输入质量标准', trigger: 'blur'}],
          name5: [{required: true, message: '请输入企业GMP证书号', trigger: 'blur'}],
          name6: [{required: true, message: '请输入认证时间', trigger: 'blur'}],
          name7: [{required: true, message: '请输入有效期', trigger: 'blur'}],
          name8: [{required: true, message: '请输入存储条件', trigger: 'blur'}],
        },
      }
    },

    methods: {
      init(param) {
        this.editDialogVisiblePill = param.flag
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      submitForm() {
        this.$refs.dataForm.validate(valid => {
          let this_ = this
          if (valid) {
            this_.$message({
              message: '操作成功', type: 'success'
            })
          }
        })
      },
    }
  }
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #2F4554;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
